<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
</head>

<body>
    <div class="app">
        <p ref="p">{{msg}}</p>
        <input type="button" value="msg重新赋值" @click="resetMsg()">
        <hr>
        <p>{{info}}</p>
        <input type="text" v-model="info">
        <input type="button" value="开启info监视" @click="openWatch()">
        <input type="button" value="关闭info监视" @click="closeWatch()">
        <hr>
        <p>{{user}}</p>
        <input type="text" v-model="user.name">
        <input type="text" v-model="user.age">
        <input type="text" v-model="user.addr.prov">
        <input type="text" v-model="user.addr.city">
    </div>
</body>
<script>
    var vm = new Vue({
        el: ".app",
        data: {
            msg: "王梦云",
            info:"情深深雨蒙蒙",
            user:{
                name:"不良帅",
                age:300,
                addr:{
                    prov:"大唐",
                    city:"藏兵谷"
                }
            }
        },
        methods: {
            resetMsg() {
                let temp1 = this.$refs.p.innerText;
                console.log("赋值之前:" + temp1);
                this.msg = "仲天琪";
                // let temp2 = this.$refs.p.innerText;
                // console.log("赋值之后:" + temp2);
                // setTimeout(() => {
                //     let temp2 = this.$refs.p.innerText;
                //     console.log("赋值之后:" + temp2);
                // }, 1000);
                // this.$nextTick(()=>{
                //     let temp2 = this.$refs.p.innerText;
                //     console.log("赋值之后:" + temp2);
                // })
                Vue.nextTick(()=>{
                    let temp2 = this.$refs.p.innerText;
                    console.log("赋值之后:" + temp2);
                })
            },
            openWatch(){
                this.unwatch=this.$watch("info",function(nv,ov){
                    console.log("内部监视器info变量发生变化",nv,ov);
                })
            },
            closeWatch(){
                this.unwatch();
            }
        },
        watch:{
            // info:function(){
            //     console.log("info变量发生变化");
            // }
            // user:{
            //     handler(nv,ov){
            //         console.log("内部监视器监视user对象变化",nv,ov);
            //     },
            //     deep:true
            // }
        }
    })
    // var unwatch=vm.$watch("info",function(nv,ov){
    //     console.log("外部监视器的启动监控",nv,ov);
    // });
    // setTimeout(()=>{
    //     unwatch();
    // },2000);

    var unwatch=vm.$watch(function(){
        // return this.user.name+this.user.age+this.user.addr.prov;//返回的nv、ov也是以该string形式
        // return [this.user.name,this.user.age,this.user.addr.city];//返回的.....也是Array形式
        // return {name:this.user.name,
        //         age:this.user.age,
        //         prov:this.user.addr.prov,
        //         city:this.user.addr.city}
        return this.user;//监视整个对象
    },function(nv,ov){
        console.log("改了上述属性发生的监视",nv,ov);
    },{
        deep:true,
        immediate:true
    })
</script>

</html>